<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rust知识解释智能体</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
    <!-- Markdown 渲染 -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <!-- 代码高亮 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/styles/github.min.css">
    <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/lib/highlight.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/lib/languages/rust.min.js"></script>
    
    <!-- 多模态增强样式 -->
    <style id="multimodal-styles"></style>
</head>
<body>
    <div class="container">
        <!-- 移动端汉堡菜单按钮 -->
        <button class="sidebar-toggle" id="sidebarToggle" aria-label="展开/收起导航栏">
            <i class="fas fa-bars"></i>
        </button>

        <!-- 头部 -->
        <header class="header">
            <h1><i class="fas fa-robot"></i> Rust知识解释智能体</h1>
            <p>智能问答 · 多轮对话 · 个性化讲解 · 多模态展示</p>
        </header>

        <!-- 主要内容区域 -->
        <main class="main-content">
            <!-- 侧边栏 -->
            <aside class="sidebar">
                <h3><i class="fas fa-user"></i> 用户信息</h3>
                
                <div class="user-info">
                    <label>当前用户</label>
                    <div class="current-user">
                        <strong>{{ user.user_name }}</strong>
                        <span class="user-role">{{ user.user_role }}</span>
                    </div>
                    <input type="text" id="userId" value="{{ user.user_id }}" style="display: none;">
                    <div class="user-status">
                        <span class="status-dot online"></span>
                        <span>已登录</span>
                    </div>
                </div>

                <div class="user-actions">
                    <button onclick="logout()" class="action-btn logout-btn">
                        <i class="fas fa-sign-out-alt"></i> 退出登录
                    </button>
                </div>

                <div class="question-types">
                    <h4><i class="fas fa-tags"></i> 问题类型</h4>
                    <div class="type-indicator">
                        <span class="type-tag" data-type="definition">定义</span>
                        <span class="type-tag" data-type="usage">用法</span>
                        <span class="type-tag" data-type="error_debug">调试</span>
                        <span class="type-tag" data-type="comparison">对比</span>
                        <span class="type-tag" data-type="faq">FAQ</span>
                    </div>
                </div>

                <div class="sidebar-actions">
                    <button id="codeAnalysis" class="action-btn" onclick="window.location.href='http://127.0.0.1:5001/code_editor'">
                        <i class="fas fa-code"></i> 例题练习
                    </button>
                    <button id="smartPractice" class="action-btn" onclick="window.location.href='http://127.0.0.1:5001/practice'">
                        <i class="fas fa-brain"></i> 智能出题
                    </button>
                    <button id="clearChat" class="action-btn">
                        <i class="fas fa-trash"></i> 清空聊天
                    </button>
                    <button id="exportChat" class="action-btn">
                        <i class="fas fa-download"></i> 导出记录
                    </button>
                </div>

                <div class="status-indicator" style="display: none;">
                    <span>ℹ️</span>
                    <span>系统就绪</span>
                </div>
            </aside>

            <!-- 聊天区域 -->
            <section class="chat-area">
                <!-- 聊天头部 -->
                <div class="chat-header">
                    <h3><i class="fas fa-comments"></i> 智能对话</h3>
                    <p>与AI助手进行Rust编程知识交流</p>
                </div>

                <!-- 消息列表 -->
                <div class="messages">
                    <!-- 消息将在这里动态添加 -->
                </div>

                <!-- 输入区域 -->
                <div class="input-area">
                    <div class="input-container">
                        <textarea 
                            id="messageInput" 
                            placeholder="请输入您的Rust相关问题... (按Enter发送，Shift+Enter换行)"
                            rows="1"
                        ></textarea>
                        <button id="sendBtn" class="send-btn">
                            <i class="fas fa-paper-plane"></i>
                            发送
                        </button>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <!-- JavaScript -->
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
    
    <!-- 多模态增强脚本 -->
    <script id="multimodal-scripts"></script>
    
    <!-- 初始化Mermaid -->
    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true
            }
        });
    </script>
    <!-- svg-pan-zoom CDN，必须在app.js后引入 -->
    <script src="https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js"></script>
</body>
</html> 